<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2019/9/16
  Time: 9:22
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
    <head>
        <title>日志管理</title>
        <style>
            .layui-table-cell {
                /* height: auto !important;*/
                white-space: normal;
                width: 50px;
            }
        </style>
        <meta charset="utf-8">
        <link href="../layui/css/layui.css" rel="stylesheet">
        <script src="../js/jquery-1.12.4.js" type="text/javascript"></script>
        <script src="../layui/layui.js" type="text/javascript"></script>
        <script type="text/javascript">

        layui.use(['table','form'],function () {
                var table = layui.table;
                var form = layui.form;

                /*//加载页面时向后台发送ajax请求查询出类型
                $.ajax({
                    url:"${pageContext.request.contextPath}/log/selectType",
                    success:function (data) {
                        //遍历查询出来的数据拼接到下拉选择框中
                        for (var i = 0 ; i < data.length; i++) {
                            $("#logType").append("<option value="+data[i]+">"+data[i]+"</option>")
                        }
                        //form.render('select', 'log_form');
                    }
                })*/
                //数据展示
                table.render({
                    elem: '#logTable',
                    url: '${pageContext.request.contextPath}/log/selectLog', //数据接口
                    page: true, //开启分页
                    toolbar:"#logToolbar",
                    cols: [[ //表头
                        //{type:"checkbox"},
                        { title: '日志编号',field: 'logId', width:110, sort: true,align:'center'},
                        {title: '操作人编号',templet: '<div>{{d.admin.id}}</div>',align:'center'},
                        {title: '操作人姓名',templet: '<div>{{d.admin.username}}</div>',align:'center'},
                        {title: '记录时间',field:"logDate",align:'center'},
                        {title: '操作内容',field: 'logContent',align:'center'},
                        {title: '操作类型',field: 'logType',align:'center'},
                        {title: '操作者ip',field: 'logIp',align:'center'},
                    ]]

                });


            })

            //点击搜索向后台发送数据 如果什么都不填 默认是搜索所有 模糊搜索
        function searchLog() {
            //获取输入框中的数据
            var logContent = $("#logContent").val();
            var logType = $("#logType").val();
            //重新加载数据表格，重载的时候可以继续往table.render中添加对应的参数
            var table = layui.table;
            table.reload("logTable", {
                where:{logContent:logContent,logType:logType}
            })
        }
        </script>
    </head>
    <body>
        <%--日志记录的数据表格--%>
        <table id="logTable" lay-filter="log_table"></table>
        <%--数据表格绑定工具栏--%>
        <div id="logToolbar" style="display: none;">
            <div class="layui-inline">
               <label class="layui-form-label" style="width: auto">日志内容:</label>
                <div class="layui-input-inline" style="width: 200px;">
                    <input type="text" name="logContent" id="logContent" class="layui-input">
                </div>
                <div class="layui-input-inline"><label class="layui-form-label"style="width: auto">日志类型:</label>
                <div class="layui-input-inline" style="width: 100px;">
                    <select id="logType" name="logType" lay-verify="required">
                        <option value="">请选择</option>
                        <option value="select">select</option>
                        <option value="update">update</option>
                        <option value="delete">delete</option>
                        <option value="insert">insert</option>
                    </select>
                </div></div>
                <div class="layui-input-inline" style="width: 100px;">
                    <button type="button" class="layui-btn layui-btn-danger" onclick="searchLog()">
                        <i class="layui-icon layui-icon-search"></i>搜索
                    </button>
                </div>
            </div>
        </div>
    </body>
</html>
